<template>

  <div class="login_wrapper">
    <img src="../assets/bg.jpg" class="bg_img" alt="">
    <div class="text">宠物医院门诊管理系统</div>
    <div class="input_wrapper">
       <el-select @change="select" v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.realname+'('+item.position+')'"  
          :value="item.id">
        </el-option>
      </el-select>   
      <div class="password_wrapper">
        <el-input type="password" v-model="password"></el-input>
      </div> 
      <div class="login_btn_wrapper">
        <el-button type="success" @click="login">登录</el-button>
      </div> 
    </div>

  </div>
</template>

<script>
import {myGet, myPostBody} from "../utils/api"

export default {
  data(){
    return {
      input: '', 
      options: [], 
      value: '',
      password: '', 
      doc_id: ''
    }
  }, 
  methods: {
    select(e){
      console.debug("selected doctor_id: ", e)
      this.doc_id = e
      this.password = '123456'
      // myPostBody("/doctor/login", {id: doctor_id}).then(res => {
      //   console.debug("doctor login success: ", res.data.res)
      //   var myres = res.data.res
      //   window.localStorage.setItem("doctor_id", myres.id)  
      //   window.localStorage.setItem("realname", myres.realname)  
      //   window.localStorage.setItem("doctor_avatar", myres.avatar)  
      //   window.localStorage.setItem("token", myres.token)  
      //   console.debug("doctor_id:", window.localStorage.getItem("doctor_id"))
      //   this.$router.replace({path: '/sev_lis'})
      // }).catch(err => {
      //   console.debug("doctor login error: ", err)
      // })
    }, 
    login(){
      myPostBody("/doctor/login", {id: this.doc_id,  password: this.password}).then(res => {
        console.debug("doctor login success: ", res.data.res)
        var myres = res.data.res
        window.localStorage.setItem("doctor_id", myres.id)  
        window.localStorage.setItem("realname", myres.realname)  
        window.localStorage.setItem("doctor_avatar", myres.avatar)  
        window.localStorage.setItem("token", myres.token)  
        window.localStorage.setItem("position", myres.position)  
        console.debug("doctor_id:", window.localStorage.getItem("doctor_id"))
        switch(myres.position){
          case '护士': this.$router.replace({path: '/get_drug'});
          window.localStorage.setItem('left_select_index', 7);
          this.$store.commit("changeTitle", '取药管理');break;
          case '医生': this.$router.replace({path: '/reg'});
          window.localStorage.setItem('left_select_index', 3);
          this.$store.commit("changeTitle", '挂号预约');break;
          case '管理员': this.$router.replace({path: '/sev_lis'});
          window.localStorage.setItem('left_select_index', 1);
          this.$store.commit("changeTitle", '服务列表');break;
          case '检验处': this.$router.replace({path: '/result_view'});
          window.localStorage.setItem('left_select_index', 10);
          this.$store.commit("changeTitle", '结果维护');break;
        }
        
      }).catch(err => {
        console.debug("doctor login error: ", err)
        this.$message({showClose: true, message: '账号或面不正确', type: 'error'})
      })
    }, //login end 
  },
  mounted(){
    myGet("doctor/all", null).then(res => {
      var myres = res.data.res
      console.debug("docrot List success:", myres)
      this.options = myres
    }).catch(err => {
      console.debug("docrot List error:", wee)
    })
  },
}
</script>

<style scoped>

.login_btn_wrapper{
  width: 300px;
  margin-top: 20px;
}
.login_btn_wrapper .el-button{
  width: 300px;
}

.password_wrapper{
  width: 300px;
  margin-top: 20px;
}

.text{
  margin-top: 50px;
  color: rgb(217, 206, 228);
  font-size: 40px;
  font-weight: bold;
}
  .input_wrapper{
    width: 300px;
    /* height: 40px; */
    margin: 20px auto;
    padding: 1px;
    /* box-shadow:  0 0 10px red; */
    /* -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px); */
  }
.input_wrapper .el-select {
  width: 300px;
}


  .login_wrapper{
    padding: 1px;
    width: 600px;
    height: 400px;
    box-shadow:  0 0 30px white;
    margin: 70px auto;
    /* background-image: url(https://2115748.oss-cn-beijing.aliyuncs.com/his/bg%20%281%29.jpg); */
    
    /* background-size: 100% 100%; */
    /* https://2115748.oss-cn-beijing.aliyuncs.com/his/bg.jpg */
    /* -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px); */
  }
  .bg_img{
    position: absolute;
    height: 100vh;
    min-height: 700px;
    width: 100%;
    z-index: -2;
    top: 0;
    left: 0;
  }
</style>